<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"  charset="utf-8">
    <script type="text/javascript">
    </script>
    <title>登陆</title>
    <%--<link rel="stylesheet" href="<%=basePath%>templates/style/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=basePath%>templates/style/build/css/doc.css" media="all">--%>
    <script src="<%=basePath%>templates/style/plugins/layui/layui.js"></script>
    <script src="<%=basePath%>templates/style/plugins/layui/jquery-3.3.1.min.js"></script>

    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        html {
            background:#fff;
        }
        .box{
            width:149px;
            margin:38px auto;
            overflow:hidden;
        }
        .logle{
            height:76px;
            width:149px;
        }
        .logfont{
            width:100%;
            height:18px;
            line-height: 18px;
            text-align:center;
            font-size:18px;
            font-family:HYZhengYuan-GES;
            color:rgba(0,91,172,1);
            margin-top:5px;
        }
        .englog{
            margin:6px auto 0 auto;
            text-align:center;
            width:94%;
            height:15px;
            font-size:15px;
            font-family:HYZhengYuan-GES;
            color:rgba(0,91,172,1);
            line-height:15px;
        }
        .boxtop{
            height:310px;
            width:500px;
            margin:0 auto;
            background:#fff;
            border-radius:10px;
            box-shadow: 4px 4px 20px 4px rgba(0,0,0,0.12);
            overflow:hidden;
        }
        .boxbot{
            margin:33px 77px 56px 77px;
        }
        .topzi{
            margin-top:3.3px;
        }
        .name{
            height:52px;
        }
        .namepic{
            width:45px;
            height:46px;
            margin-top:5px;
        }
        hr{
            height:1px;
            margin:6px 4px 0 4px;
            background:#959595;
        }
        .workma{
            font-size:20px;
            font-family:SimHei;
            color:#a0a0a0;
            margin-left:26px;
        }
        .boxname{
            display:inline-block;
            vertical-align:middle
        }
        .button{
            margin:0 77px;
            height:58px;
            line-height:58px;
            background:#53a4dc;
            background-color:#53a4dc;
            border-radius:20px;
            margin-top:51px;
            text-align:center;
            font-size:24px;
            font-family:SimHei;
            color:#000;
            cursor:pointer;
        }
        .bodcen{
            height:500px;
            width:500px;
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
        }
        input{
            border:none;
            outline:none;
            text-align:left;
        }

    </style>
</head>
<body>
<div class="bodcen">
    <div class="box">
        <img src="<%=basePath%>templates/style/softPhone/images/logo.png" class="logle">
        <p class="logfont">中国中化集团公司</p>
        <p class="englog">SINOCHEM GROUP</p>
    </div>
    <form id="login" action="<%=basePath%>softPhone/login.do" method="post">
        <div class="boxtop">
            <div class="boxbot">
                <div class="boxname">
                    <img src="<%=basePath%>templates/style/softPhone/images/name.png" class="namepic">
                    <input id="loginId" type="" name="loginId" placeholder="工号" class="workma" autocomplete="off">
                </div>
                <hr>
                <div class="boxname">
                    <img src="<%=basePath%>templates/style/softPhone/images/phone.jpg" class="namepic">
                    <input id="place" type="" name="place" placeholder="座机号" class="workma" autocomplete="off">
                </div>
                <hr>
            </div>
            <div class="button" onclick="login()">登陆</div>
        </div>
    </form>
</div>
</body>
<%--<script src="<%=basePath%>templates/style/softPhone/js/login.js"></script>--%>
<script>
    function login() {
        var loginId = $("#loginId").val();
        var place = $("#place").val();
        layui.use('table', function () {
            if (loginId == '' || loginId == null) {
                layer.msg("请填写工号！", {icon: 0, time: 2000});
                return false;
            }
            if (place == '' || place == null) {
                layer.msg("请填写座机号！", {icon: 0, time: 2000});
                return false;
            }
        });
        document.getElementById("login").submit();
    }
</script>
</html>